<template>
	<view class="container">
		<view v-for="(item,index) in props.list" :key="index" @click="change(index)" class="tab-boxes"
			:class="{ 'line': index < props.list.length, 'active': index === content }">
			{{item}}
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		content: {
			type: Number,
			default: 0
		},
		list: {
			type: Array,
			default: () => []
		}
	})

	const emit = defineEmits(['change'])
	const change = (index) => {
		emit('change', index)
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		text-align: center;
		font-size: 4.1063vw;
		color: #989898;
		border-radius: 2.4155vw;
		background: #FFFFFF;
		box-shadow: 0 1.2077vw 2.8986vw rgba(75, 98, 157, .22);

		.tab-boxes {
			flex: 1;
		}

		.line {
			position: relative;

			&::after {
				content: '';
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 1rpx;
				height: 60rpx;
				background-color: #d8d8d8;
			}
		}
		
		.active {
			color: #edad14;
			position: relative;
			
			&::before {
				content: '';
				position: absolute;
				width: 50%;
				height: 7rpx;
				border-radius: 10rpx;
				background: #edad14;
				bottom: -20rpx;
				left: 50%;
				transform: translate(-50%,-50%);
			}
		}
	}
</style>